<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS018-Tab栏案例</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #222;
        color: snow;
    }

    ul {
        list-style: none;
    }

    button.nav {
        color: snow;
        background: none;
        border: none;
        cursor: pointer;
    }

    .container {
        display: inline-flex;
        flex-direction: column;
        margin: 1rem;
        padding: 1rem;
        border: 1px solid snow;
    }

    .tab-box {
        display: inline-flex;
        flex-direction: column;
        gap: .5rem;
        width: 30rem;
        height: 20.5rem;
    }

    .tab-box * {
        /* border: 1px solid gray; */
    }

    .tab-box .tab-head {
        display: flex;
        align-items: end;
        height: 2rem;
    }

    .tab-box .tab-head .tab-title {
        flex-grow: 1;
        font-size: 1.5rem;
    }

    .tab-box .tab-head .tab-nav {
        display: inline-flex;
        gap: 1rem;
        height: 100%;
    }

    ul.tab-nav li {
        display: inline-flex;
        align-items: center;
        padding-left: .5rem;
    }

    ul.tab-nav li button.nav {
        padding: .2rem;
        font-size: .9rem;
    }

    ul.tab-nav li button.nav.active {
        box-shadow: inset 0 -2px snow;
    }

    .tab-box .tab-body {
        position: relative;
    }

    .tab-box .tab-body .item {
        position: absolute;
        display: flex;
        gap: .5rem;
        height: 18rem;
        visibility: hidden;
    }

    .tab-box .tab-body .item .leader {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
        background-color: steelblue;
    }

    .tab-box .tab-body .item .members {
        width: 19.5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .25rem;
    }

    .tab-box .tab-body .item .members li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid steelblue;
    }

    .tab-box .tab-body .item.active {
        visibility: visible;
    }
</style>

<body>
    <div class="container">
        <div class="tab-box">
            <div class="tab-head">
                <div class="tab-title">每日特价</div>
                <ul class="tab-nav">
                    <li><button class="nav active">精选</button></li>
                    <li><button class="nav">游戏</button></li>
                    <li><button class="nav">影音</button></li>
                </ul>
            </div>
            <div class="tab-body">
                <div class="item active">
                    <div class="leader">leader</div>
                    <ul class="members">
                        <li>member1</li>
                        <li>member2</li>
                        <li>member3</li>
                        <li>member4</li>
                    </ul>
                </div>
                <div class="item">
                    <div class="leader">leader</div>
                    <ul class="members">
                        <li>member1</li>
                        <li>member2</li>
                        <li>member3</li>
                        <li>member4</li>
                    </ul>
                </div>
                <div class="item">
                    <div class="leader">leader</div>
                    <ul class="members">
                        <li>member1</li>
                        <li>member2</li>
                        <li>member3</li>
                        <li>member4</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        const tabItemAccentColors = ['steelblue', 'slategray', 'slateblue']
        const tabNavBtns = document.querySelectorAll('.tab-nav button.nav')

        for (let i = 0; i < tabNavBtns.length; i++) {
            tabNavBtns[i].addEventListener('mouseenter', function () {
                document.querySelector('.tab-nav button.nav.active').classList.remove('active')
                this.classList.add('active')

                document.querySelector('.tab-body .item.active').classList.remove('active')
                const activeItem = document.querySelector(`.tab-body .item:nth-child(${i + 1})`)
                activeItem.classList.add('active')
                activeItem.querySelector('.leader').style.backgroundColor = tabItemAccentColors[i]
                activeItem.querySelectorAll('.members li').forEach(li => li.style.borderColor = tabItemAccentColors[i])
            })
        }

    </script>
</body>

</html>